<template>
  <!-- 表单容器 -->
  <div class="form-container">
    <el-input
      v-model="props.modelValue"
      @input="handleInput"
      placeholder="请输入手机号码"
    />
    <!-- 获取验证码按钮，根据条件禁用 -->
    <el-button
      plain
      class="ipn_btn"
      @click="handleOpenModal()"
      :disabled="disabled"
      >{{ btnText }}
    </el-button>
  </div>
  <!-- 发送验证码的对话框 -->
  <div>
    <el-dialog v-model="dialogVisible_1" title="发送手机验证码" width="512px">
      <!-- 输入验证码 -->
      <el-input placeholder="请输入验证码" v-model="code">
        <!-- 验证码图片，点击可刷新 -->
        <template #append>
          <el-image
            @click="update_validate_image"
            class="code-image"
            :src="validate_image_url"
          >
            <template #error>
              <el-text type="info" size="small">点击刷新</el-text>
            </template>
          </el-image>
        </template>
      </el-input>
      <!-- 发送验证码按钮 -->
      <div class="btns">
        <el-button type="primary" @click="handleCoundDown"
          >发送验证码</el-button
        >
      </div>
    </el-dialog>
    <!-- 验证码弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogText" width="20%">
      <span
        >欢迎参与AI Will综合素养挑战赛， 您的动态验证为【<b>{{ codePhone }}</b
        >】， 非本人操作请忽略，感谢您为科创事业添砖加瓦！
      </span>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ElMessage } from "element-plus"; // 引入Element Plus的消息提示组件
import { useValidateImage } from "@/hooks/useValidateImage"; //引入自定义的验证码图片钩子
import { sendCode } from "@/api/index"; //引入发送验证码的API函数

// 使用自定义钩子获取验证码图片和刷新方法
const { validate_image_url, update_validate_image } = useValidateImage();
import { nextTick, ref } from "vue"; // 导入Vue的nextTick和响应式引用ref

// 定义props，接收外部传递的手机号码模型值
const props = defineProps({
  modelValue: {
    default: "",
    type: String,
  },
});

// 定义emits，用于触发父组件的更新事件
const emit = defineEmits(["update:modelValue"]);
// 定义手机号码正则表达式
const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
// 输入手机号码时的处理函数
const handleInput = (value) => {
  emit("update:modelValue", value);
  if (!value) {
    disabled.value = true;
    return;
  }
  if (phoneReg.test(value)) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
};
// 60秒验证码
const btnText = ref("获取验证码");
const countdown = ref(60);
const disabled = ref(true);
const code = ref("");
const dialogVisible_1 = ref(false);
const dialogVisible = ref(false);
const dialogText = ref("手机验证码(测试阶段-流程使用) ");
const codePhone = ref("");
const handleOpenModal = () => {
  if (!props.modelValue) {
    ElMessage.error("请输入手机号码");
    disabled.value = true;
    nextTick(() => {
      update_validate_image();
    });
    return;
  }
  if (phoneReg.test(props.modelValue)) {
    disabled.value = false;
  } else {
    ElMessage.error("手机号码格式错误");
    disabled.value = true;
  }
  dialogVisible_1.value = true;
};

// 倒计时处理函数
const handleCoundDown = async () => {
  const phone = props.modelValue;
  if (disabled.value) {
    return; // 如果按钮已禁用，则不执行任何操作
  }
  if (!code.value) {
    ElMessage.error("请输入验证码！");
    return;
  }

  let res = await handleSendCode(phone);
  if (!res.success) {
    return;
  }
  dialogVisible_1.value = false;
  let timer = setInterval(() => {
    if (countdown.value <= 0) {
      disabled.value = false;
      btnText.value = "获取验证码";
      clearInterval(timer);
      countdown.value = 60;
    } else {
      btnText.value = countdown.value + "s 后重试";
      countdown.value--;
      disabled.value = true;
    }
  }, 1000);
};

// 发送验证码的处理函数
const handleSendCode = async (phone) => {
  let res = await sendCode({ phone, code: code.value });
  if (res.success) {
    dialogVisible.value = true;
    codePhone.value = res.entity;
    ElMessage.success(res.message);
  } else {
    ElMessage.error(res.message);
  }
  return res;
};
</script>

<style lang="scss" scoped>
.form-container {
  display: flex;
  width: 512px;
}
.btns {
  width: 100%;
  padding-top: 32px;
  display: flex;
  justify-content: center;
}
</style>